<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
</head>

<body>
    <div style="float:left">
        <div><span>Enter a message below to send</span></div>
        <div><input type="text" name="msg" id="msg">
            <button onclick="send()">Send</button>
        </div>
        <div>
            <input type="text" name="username" id="username">
            <button onclick="connect()">连接</button>
        </div>
        <div>
            <button onclick="uncall()">uncall</button>
            <button onclick="call()">call</button>
            <button onclick="ask()">ask</button>
            <button onclick="unask()">unask</button>
        </div>
        <div>
            <p><button onclick="put()">put</button></p>
        </div>
    </div>
    <div style="float:left">
        <p>ws://localhost:8888/ws</p>
        <div id="content" style="overflow: scroll;height: 700px;width: 500px;">

        </div>
    </div>
</body>
<script>
    /* if(!("WebSocket" in window)){
        alert("您的浏览器不支持，请换Chrome");
        return;
    } */
    var ws;
    var doc = document.getElementById("content");
    var word = document.getElementById("msg");
    var username = document.getElementById("username");

    function connect() {
		var userInfo='{"avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/rgbaiaDTeNzRAmdwmuWyKCB6R6GNRgSZFWL7o5djFyLuznejStvldtDNCHBXMHCJM7iclQlJ4R1sZqhgT8xKzjRg/132","city":"","id":"7799","country":"","sex":"0","language":"zh_CN","nickName":"Samay","province":""}'
		
        ws = new WebSocket('ws://172.16.88.58:8888/ws?user=' + userInfo);
        ws.onopen = function () {
            var p = document.createElement("p")
            p.textContent = '已连接...'
            doc.appendChild(p);
            console.log("已连接...")
        }

        ws.onmessage = function (evt) {
            var p = document.createElement("p")
            p.textContent = evt.data
            doc.appendChild(p);
            console.log("收到数据:" + evt.data)
        }

        ws.onclose = function () {
            var p = document.createElement("p")
            p.textContent = '已关闭连接...'
            doc.appendChild(p);
            console.log("已关闭连接.")
        }
    }

    function send() {
        if (ws == undefined) {
            alert('未连接');
            return;
        }
        let msg={
            action:'ready',
            tendency:true
        }
        ws.send(JSON.stringify(msg));
        console.log("已发送:" + JSON.stringify(msg))
    }

    function call(){
        if(ws==undefined){
            alert('未连接');
            return;
        }
        let msg={
            action:'call',
            tendency:true
        }
        ws.send(JSON.stringify(msg));
    }

    function uncall(){
        if(ws==undefined){
            alert('未连接');
            return;
        }
        let msg={
            action:'call',
            tendency:false
        }
        ws.send(JSON.stringify(msg));
    }

    function ask(){
        if(ws==undefined){
            alert('未连接');
            return;
        }
        let msg={
            action:'ask',
            tendency:true
        }
        ws.send(JSON.stringify(msg));
    }

    function unask(){
        if(ws==undefined){
            alert('未连接');
            return;
        }
        let msg={
            action:'ask',
            tendency:false
        }
        ws.send(JSON.stringify(msg));
    }

    function put(){
        if(ws==undefined){
            alert('未连接');
            return;
        }
        let msg={
            action:'put',
            tendency:true,
            putPokers:[
                {
                    colorEnum:'CLUB',
                    valueEnum:'A'
                },
                {
                    colorEnum:'SQUARE',
                    valueEnum:'A'
                }
            ]
        }
        ws.send(JSON.stringify(msg));
    }
</script>

</html>